<!-- Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<link rel="import" href="../common/cr-collapsible.html">
<link rel="import" href="cr-issue-patchset.html">
<link rel="import" href="cr-patchset-header.html">

<polymer-element name="cr-issue-patchsets" attributes="patchsets">
    <template>
        <style>
            :host { display: block; }

            .patchset {
                border-color: #dcdcdc;
                border-width: 1px 1px 0 1px;
                border-style: solid;
            }

            .patchset:last-child {
                border-width: 1px;
            }

            .patchset:not([active]) cr-patchset-header:hover {
                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
                z-index: 1;
            }

            .cr-collapsible-header {
                cursor: default;
                -webkit-user-select: none;
            }

            .show-messages-toolbar {
                margin: 0;
                margin-bottom: 1em;
                padding: 0;
            }
        </style>

        <template if="{{ !showOlderPatchsets && olderPatchsets.length }}">
            <cr-toolbar class="show-messages-toolbar">
                <a is="cr-action" on-tap="{{ handleShowOlderPatchsets }}">
                    Show {{ olderPatchsets.length }} older
                    {{ "patch" | pluralize(olderPatchsets.length) }}
                </a>
            </cr-toolbar>
        </template>

        <div class="patchsets">
            <cr-collapsible active="{{ showOlderPatchsets }}">
                <template if="{{ showOlderPatchsets }}">
                    <template repeat="{{ patchset in olderPatchsets }}">
                        <cr-collapsible class="patchset" active="{{ patchset.active }}">
                            <cr-patchset-header class="cr-collapsible-header" patchset="{{ patchset }}"></cr-patchset-header>
                            <template if="{{ patchset.active }}">
                                <cr-issue-patchset patchset="{{ patchset }}"></cr-issue-patchset>
                            </template>
                        </cr-collapsible>
                    </template>
                </template>
            </cr-collapsible>
            <cr-collapsible class="patchset" active="{{ currentPatchset.active }}">
                <cr-patchset-header class="cr-collapsible-header" patchset="{{ currentPatchset }}"></cr-patchset-header>
                <cr-issue-patchset patchset="{{ currentPatchset }}"></cr-issue-patchset>
            </cr-collapsible>
        </div>

        <cr-keyboard on-key-e="{{ handleExpandKey }}" global></cr-keyboard>
    </template>
    <script>
        Polymer({
            created: function() {
                this.patchsets = null;
                this.showOlderPatchsets = false;
                this.olderPatchsets = null;
                this.currentPatchset = null;
            },
            attached: function() {
                if (window.location.hash.startsWith('#ps')) {
                  var psId = parseInt(window.location.hash.substring(3));
                  this.showOlderPatchsets = true;
                  this.patchsets.forEach(function(patchset) {
                    patchset.active = (patchset.id == psId);
                  });
                }
            },
            patchsetsChanged: function(oldValue, newValue) {
                var value = newValue || [];
                this.olderPatchsets = value.to(-1);
                this.currentPatchset = value.last();
            },
            pluralize: function(text, count) {
                if (!count)
                    return "";
                if (count == 1)
                    return text;
                return text.pluralize();
            },
            handleShowOlderPatchsets: function() {
                this.showOlderPatchsets = true;
            },
            handleExpandKey: function(event) {
                event.preventDefault();
                var sections = this.shadowRoot.querySelectorAll(".patchset");
                var last = sections[sections.length - 1];
                if (!last)
                    return;
                last.active = true;
                last.querySelector("cr-issue-patchset").expandAllDiffs().then(function() {
                    last.scrollIntoView(true);
                });
            },
        });
    </script>
</polymer-element>
